<template>
	<div class="card-box onduty-box">
		<card-title title="各类上岗人员概览"> </card-title>
		<div class="ratio-box">
			<div class="pie" ref="ondutyBox"></div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from "echarts";
import { watch, onMounted } from "vue";
// import {  }

let eCharts = null;
let ondutyBox = $ref(null);

const props = defineProps(["list"]);
const nameList = $ref([]);
const valueList = $ref([])
watch(
	() => props.list,
	(newV) => {
		nameList = []
		valueList = []
		newV.forEach(it=>{
			nameList.push(it.val1);
			valueList.push(it.val2);
		})

		if(eCharts) {
			eCharts.clear()
			init('refresh')
		}else{
			init()
		}
	}
);

const init = (type) => {
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			top: "10%",
			left: "2%",
			right: "10%",
			bottom: "10%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
			axisLabel: {
				// inside: true,
				show: false,
				color: "#fff",
				interval: 0,
				fontSize: 14
				// rotate: 16
			},
			axisTick: {
				show: false,
			},

			axisLine: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			z: 10,
		},
		yAxis: {
			type: "category",
			data: nameList,
			axisLine: {
				show: true,
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			axisLabel: {
				color: "#fff",
			},
		},
		series: [
			{
				data: valueList,
				type: "bar",
				barWidth: 14,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: "#70F1F7" },
							// { offset: 0.5, color: '#188df0' },
							{ offset: 1, color: "#4EACEA" },
						]),
						barBorderRadius: [0, 9, 9, 0],
						label: {
							show: true,
							position: "right",
							textStyle: {
								color: "#fff",
								fontSize: 14,
							},
							formatter: "{c}人",
						},
					},
				},
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
	};
	if(!type) eCharts = echarts.init(ondutyBox);
	eCharts.setOption(option);
};
</script>

<style scoped lang="scss">
@import "../../../../../assets/css/common.scss";
.onduty-box {
	margin-top: 14px;
	height: 284px;
	.ratio-box {
		// background:url('../../../../../assets/images/home/');
		.pie {
			width: 100%;
			height: 234px;
		}
	}
}
</style>
